<template>
    <div class="center">
        <el-card class="box-card">
            <div class="card-top">
                <el-button type="primary" size="small" @click="update">修改密码</el-button>
                <el-button type="warning" size="small" @click="recharge">充值</el-button>
            </div>
            <div class="img">
                <el-upload class="avatar-uploader" action="http://134.175.252.64:8080/file/upload" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="userInfo.avatarUrl || defaultUrl" :src="userInfo.avatarUrl || imageUrl || defaultUrl"
                        class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div class="form">
                <el-form label-width="80px" :model="formLabelAlign" :rules="rules">
                    <el-form-item label="账号">
                        <el-input v-model="formLabelAlign.userAccount" size="small" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="formLabelAlign.username" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="formLabelAlign.userTel" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="formLabelAlign.email" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="余额">
                        <el-input v-model="formLabelAlign.balance" size="small" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="btn"><el-button type="primary" size="small" @click="save">保存</el-button></div>

        </el-card>
        <Update></Update>
        <Recharge @balance="balance" @getNewUserInfo="getNewUserInfo"></Recharge>
    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import Update from './update/index.vue'
import Recharge from './recharge/index.vue'
export default {
    name: 'Center',
    components: {
        Update,
        Recharge
    },
    mixins: [],
    props: {

    },
    data() {
        const validatorTel = (rule, value, callback) => {
            let reg = /^1(?:[3-9]\d|5[0-9]|7[0-8]|8[0-9])\d{8}$/
            if (!value) {
                callback(new Error('请输入手机号码'));
            } else if (!reg.test(value)) {
                callback(new Error('手机号码格式错误，请重新输入！'));
            } else if (reg.test(value)) {
                callback();
            }
        };
        const validatorEmail = (rule, value, callback) => {
            const emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,4})+$/
            if (!emailRegex.test(value)) {
                callback(new Error('请输入正确的邮箱！'));
            } else if (emailRegex.test(value)) {
                callback();
            }
        };
        return {
            defaultUrl: require('../../assets/logo.0a3252a6.png'),
            formLabelAlign: {
                userAccount: '',
                username: '',
                userTel: '',
                email: '',
                balance: ''
            },
            rules: {
                userTel: [{ validator: validatorTel, trigger: 'blur' }],
                email: [{ validator: validatorEmail, trigger: 'blur' }]
            },
            imageUrl: '',
            timerId: null
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo'])
    },
    watch: {

    },
    mounted() {
        this.formLabelAlign = this.userInfo
    },
    methods: {
        ...mapMutations('userStore', ['updateUserInfo', 'getUserInfo']),
        save() {
            const form = {
                avatarUrl: this.userInfo.avatarUrl || this.defaultUrl,
                email: this.formLabelAlign.email,
                userTel: this.formLabelAlign.userTel,
                username: this.formLabelAlign.username
            }
            if (this.imageUrl !== '') {
                form.avatarUrl = this.imageUrl
            } else if (this.userInfo.avatarUrl !== '') {
                form.avatarUrl = this.userInfo.avatarUrl
            } else {
                form.avatarUrl = this.defaultUrl
            }

            this.updateUserInfo(form)
            this.$message({
                type: 'success',
                message: '用户信息修改成功~'
            });
        },
        handleAvatarSuccess(res, file, fileList) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.imageUrl = res.data.url
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        update() {
            this.$bus.$emit('updateShow', true)
        },
        recharge() {
            this.$bus.$emit('rechargeShow', true)
        },
        balance() {
            this.formLabelAlign.balance = this.userInfo.balance
        },
        getNewUserInfo() {



            this.timerId = setInterval(() => {
                this.formLabelAlign = this.userInfo
                // 清除当前的定时器
                if (this.timerId) {
                    clearInterval(this.timerId);
                    this.timerId = null;
                }
            }, 1000);


        }
    },
    beforeDestroy() {

    }
};
</script>
<style lang='less' scoped>
.center {
    width: 50%;
    margin: 20px auto;

    .el-button--primary {
        background-color: #11A983;
    }

    .box-card {
        .card-top {
            margin-bottom: 20px;
            display: flex;
            justify-content: end;


        }

        .img {

            .avatar-uploader {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                margin: 0 auto;
                border: 1px dashed #d9d9d9;

                .el-upload {
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;

                }

                .el-upload:hover {
                    border-color: #409EFF;
                }

                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 150px;
                    height: 150px;
                    line-height: 150px;
                    text-align: center;
                    border-radius: 50%;

                }

                .avatar {
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;

                    display: block;
                }
            }
        }

        .form {
            padding: 10px 80px;

            .el-form-item {
                margin-bottom: 10px;
            }
        }

        .btn {
            width: 55px;
            height: 15px;
            margin: 0 auto;
            margin-bottom: 30px;
        }
    }
}
</style>